<template>
    <div>
        <Form :label-width="80" inline>
            <FormItem label="学年">
                <Input @on-clear="getAllSchoolCalendar" v-model="param.name" clearable class="myform"></Input>
                <Button icon="ios-search" type="success" @click="getAllSchoolCalendar" class="btn">查询</Button>
            </FormItem>

        </Form>
        <Button class="mybtn1" icon="md-add-circle" @click="modal.addSchoolCalendarFlag = true" type="info">添加</Button>
        <Button class="mybtn1" icon="md-cloud-upload" @click="" type="info">批量导入</Button>
        <Button class="mybtn1" icon="md-cloud-download" @click="" type="primary">模板下载</Button>
        <Button class="mybtn1" icon="md-cloud-download" @click="" type="primary">导出数据</Button>
        <Table border :columns="columns" :data="data">
            <template slot-scope="{ row, index }" slot="action">
                <div v-if="!row.editFlag">
                    <Button icon="ios-build" type="primary" size="small" style="margin-right: 5px" @click="row.editFlag = true">编辑</Button>
                    <Poptip
                            confirm
                            transfer
                            title="是否删除?"
                            @on-ok="remove(row,index)"
                            @on-cancel="$Message.info('已取消')">
                        <Button icon="md-trash" type="error" size="small">删除</Button>
                    </Poptip>
                </div>
                <div v-else>
                    <Button type="success" icon="ios-paper" size="small" style="margin-right: 5px"
                            @click="row.editFlag = false,saveUpdateSchoolCalendar(row)">保存
                    </Button>
                    <Button type="info" icon="ios-hand" size="small" @click="cancelSave">取消</Button>
                </div>
            </template>
        </Table>
        <Page :total="total" :page-size="param.size" @on-change="changePage" @on-page-size-change="changePageSize"
              show-sizer show-total show-elevator transfer/>
        <add-schoolCalendar :modal="modal"/>
    </div>
</template>

<script>
    import addSchoolCalendar from "../../components/modal/basicData/addSchoolCalendar";

    export default {
        components:{
            addSchoolCalendar
        },
        data() {
            return {
                modal:{
                    addSchoolCalendarFlag:false,
                },
                total:0,
                param:{
                    page:1,
                    size:1,
                    name:"",

                },
                loading:false,
                columns: [
                    {
                        type: 'index',
                        width: 70,
                        title: '序号',
                        align: 'center'
                    },
                    {
                        title: '学年',
                        sortable:true,
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-input value={params.row.name} oninput={(e) => {
                                    params.row.name = e
                                }}/>
                            } else {
                                return <span>{params.row.name}</span>
                            }
                        }
                    },
                    {
                        title: '学期',
                        sortable:true,
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-input value={params.row.term} oninput={(e) => {
                                    params.row.term = e
                                }}/>
                            } else {
                                return <span>{params.row.term}</span>
                            }
                        }
                    },
                    {

                        title: '开始时间',
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <DatePicker transfer type="date" v-model={params.row.starttime} onChangeMonthYear={(e) => {
                                    params.row.starttime = e
                                }}/>
                            } else {
                                return <DatePicker transfer>{params.row.starttime}</DatePicker>
                            }
                        }
                    },
                    {
                        title: '结束时间',
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <DatePicker transfer type="date" v-model={params.row.endtime} onChangeMonthYear={(e) => {
                                    params.row.endtime = e
                                }}/>
                            } else {
                                return <DatePicker transfer>{params.row.endtime}</DatePicker>
                            }
                        }
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                data: [],
                assignData:[] //克隆用
            }
        },
        methods: {
            remove(row,index) {
                this.http.delete(`/schoolCalendar/deleteSchoolCalendarById/${row.scId}`).then(res => {
                    if (res.data) {
                        this.$Message.success({
                            background: true,
                            content: "删除成功"
                        })
                        this.data.splice(index, 1)
                    }
                })
            },
            /**
             * 对象克隆
             */
            cancelSave(row) {
                row.editFlag = false
                this.data = []
                Object.assign(this.data, this.assignData)
            },
            saveUpdateSchoolCalendar(row){
                this.http.update('/schoolCalendar/saveEditParofessional',this.qs.parse(row)).then(res=>{
                    if (res) {
                        this.$Message.success("修改成功")
                    }
                })
            },
            /**
             * 点击下一页
             * @param val
             */
            changePage(val) {
                this.param.page = val
                this.getAllTeacher()
            },
            /**
             * 切换分页的每页显示条数
             * @param val
             */
            changePageSize(val) {
                this.param.size = val
                if (this.param.page === 1) {
                    this.getAllTeacher()
                }
            },
            /**
             * 获取全部教师信息
             */
            getAllSchoolCalendar(){
                this.loading=true;
                this.http.post('/schoolCalendar/getAllSchoolCalendar',this.qs.parse(this.param)).then(res =>{
                    if (res.data) {
                        this.data = res.data.list.map(m => {
                            m.editFlag = false
                            return m
                        })
                        this.total = res.data.total
                        Object.assign(this.assignData, this.data)
                    }
                }).finally(f=>{
                    this.loading=false
                });

            }
        },
        created() {
           this.getAllSchoolCalendar();
        }
    }
</script>
<style scoped>
    .myform {
        width: 300px;
    }

    .btn {
        margin-left: 10px;
    }
</style>